<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>
    <link rel="stylesheet" href="css/musicplay.css">
</head>

<body>

    <div id="app">
        <div class="bg" ref="bg" id="bg" :class="{bgDisplay:isAlbumDisplay}"></div>
        <div class="music-player">
            <div class="head">
                <div class="search">
                    <input type="text" class="search-box" v-model="query" @keyup.enter="searchMusic"
                        placeholder="请输入搜索内容">
                    <button class="search-icon" @click="searchMusic"></button>
                </div>
            </div>
            <ul class="list">
                <li class="item" v-for="(item,index) in musicList" @dblclick='playMusic(index)'
                    :class="{active:index==currentIndex}">
                    <div class="left">
                        <div class="like-icon">{{index+1}}</div>
                        <div class="music-name" :title="item.name">{{item.name}}</div>
                    </div>
                    <div class="right">
                        <div class="music-singer" :title="artistsName(item.ar)">
                            {{artistsName(item.ar)}}</div>
                        <div class="music-duration">{{durationConvert(item.dt)}}</div>
                    </div>
                </li>

            </ul>
            <div class="control-panel">
                <div class="musicProgressControls">
                    <div class="music-time">
                        <div class="current-time">{{durationConvert(currentTime,1)}}</div>
                        <div class="total-time">{{durationConvert(totalTime,1)}}</div>
                    </div>
                    <div class="slider">
                        <div class="music-progress" ref="musicProgress">
                            <div class="music-pin" id="music-pin"></div>
                        </div>
                    </div>
                </div>

                <div class="bottom">

                    <div class="left">
                        <button class="player-model"></button>
                        <div class="volume ">
                            <button class="volume-btn"></button>
                            <div class="wrap">
                                <div class="volume-controls">
                                    <div class="slider">
                                        <div class="progress" ref="progress">
                                            <div class="pin" id="volume-pin"></div>
                                        </div>
                                    </div>
                                    <div class="volume-text">{{volume+"%"}}</div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="mid">
                        <button class="prev" @click="preSong"></button>
                        <button class="play-or-stop" ref="playOrPause" :class="{play:isPlay}"
                            @click="playOrPause"></button>
                        <button class="next" @click="nextSong()"></button>
                    </div>
                    <div class="right">
                        <button class="music-album" @click="displayAlbum"></button>
                        <button class="player-list"></button>
                    </div>
                </div>
            </div>
        </div>
        <audio :src="musicUrl" preload="auto" id="myAudio" ref="myAudio" autoplay @play="onPlay"></audio>
        <canvas id="canvas"></canvas>
    </div>

</body>
<script src="js/musicplay.js"></script>

</html>
